<script setup>

import CardBox from "@/components/CardBox/index.vue";
import {useRouter} from "vue-router";
import {Download} from "@element-plus/icons-vue";
const router = useRouter()
const searchForm = {
  a: '',
  b: '',
  c: '',
  d: ''
}

const editForm = reactive({
  a: '',
  b: '',
  c: '',
  d: ''
})

const tableData = [
  {
    a: '李杰',
    b: '侦查系',
    c: '侦查二班',
    d: '2022',
    e: '13049203920',
    f: '江苏省南京市玄武区',
  },
]

const showDia1 = ref(false)
const selectable = (row) => ![].includes(row.id)
const handleAdd = () => {
  showDia1.value = true
}

const handleUploadSuccess = (response, file, fileList) => {
  console.log(response, file, fileList)
}

const handleEdit = (index) => {
  router.push('noticeEdit')
}

const handleDetails = (index) => {
  console.log("执行")
  router.push('/honor/graduateManagement/schoolArchives')
}
</script>

<template>
  <div class="outBox">
    <CardBox style="margin-bottom: 20px" title="筛选查询">
      <template #btn-cont>
        <el-button type="primary">查询</el-button>
        <el-button>重置</el-button>
      </template>
      <template #content>
        <el-form :model="searchForm" label-width="auto" inline="true">
          <el-form-item label="姓名">
            <el-input v-model="searchForm.a"/>
          </el-form-item>
          <el-form-item label="院系">
            <el-input v-model="searchForm.b"/>
          </el-form-item>
          <el-form-item label="户籍地">
            <el-input v-model="searchForm.c"/>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input v-model="searchForm.d"/>
          </el-form-item>
        </el-form>
      </template>
    </CardBox>
    <CardBox title="归档管理">
      <template #btn-cont>
        <el-button type="primary">
          <el-icon><Download/></el-icon>
          <span>导出</span>
        </el-button>
      </template>
      <template #content>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" :selectable="selectable" width="55"/>
          <el-table-column label="序号" type="index" width="50" align="center"/>
          <el-table-column prop="a" label="姓名" align="center"/>
          <el-table-column prop="b" label="院系" align="center"/>
          <el-table-column prop="c" label="班级" align="center"/>
          <el-table-column prop="d" label="毕业年份" align="center"  width="100"/>
          <el-table-column prop="e" label="联系电话" align="center"/>
          <el-table-column prop="f" label="户籍地" align="center"  width="200"/>
          <el-table-column prop="g" label="在校档案" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleDetails(scope.$index)">查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="g" label="在职荣誉" align="center">
            <template #default="scope">
              <el-button type="primary" link>查看详情</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="g" label="管理" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleEdit(scope.$index)">管理</el-button>
              <el-button type="danger" link>移除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pageBox">
          <el-pagination background layout="prev, pager, next" :total="1000"/>
        </div>
      </template>
    </CardBox>
  </div>
</template>

<style scoped lang="scss">
.uploadBox{
  margin-left: 50px;
}
.footer{
  text-align: center;
}
</style>
